import { useEffect, useState, createContext } from "react";
import { Outlet } from "react-router-dom";
import ProgressBar from "@/components/ProgressBar";
import Navbar from "@/components/Navbar";
import orgService from "@/api/index";
import TipsBox from "@/components/TipsBox";
import Footer from "@/components/Footer";
import { useLocation } from "react-router-dom"
export const AppContext = createContext<any>({});

function Main() {
  const [nav, setNav] = useState<any>([]);
  const [banner, setBanner] = useState<any>([]);
  const [goods, setGoods] = useState<any>([]);
  const location = useLocation()
  useEffect(() => {
    orgService.getHomeList().then((res) => {
      if (res) {
        const { type, banner, TProductList } = res.data;
        setNav(type);
        setBanner(banner);
        setGoods(TProductList);
      }
    });
  }, []);
  return (
    <>
      <TipsBox></TipsBox>
      <div className={`m-auto  w-full  bg-slate-100 pt-[158px] h-full`}>
        <ProgressBar />
        <Navbar>{nav}</Navbar>
        <AppContext.Provider value={{ banner, goods }}>
          <Outlet></Outlet>
          {banner.length > 0 && (
            <AppContext.Provider value={{ nav }}>
              <Footer></Footer>
            </AppContext.Provider>
          )}
        </AppContext.Provider>

      </div>
    </>
  );
}

export default Main;
